03. Intro To Build Tools

In this section we are going to talk about some general principles that all build tools have in common, and then introduce how Webpack fits into that role.

Build tools will manage all our assets so that we don’t have to by combining them all into a single file (or sometimes a few files). We create a set of rules for the build tool to follow, telling it specifically how we want each type of asset handled, and then it follows our rules, takes all the assets and bundles them into a single large file, which has everything loading in the correct order and is much easier for us to deal with. Typically, files with names like bundle or main are the result of a build tool combining many assets into one.

What does it look like to write these rules for a build tool? Rules are written into config files. Just to give you a glimpse of where we’re headed, here is an example webpack config file. Don’t worry, this should look like gibberish right now, but we’re just going to take a look at a few things.

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'main.js',
  },
  module: {
       rules: [
          {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader",
          },
          {
                test: /\.html$/,
                use: [{ loader: "html-loader"}],
                },
                {
                    test: /\.scss$/,
                    use: [ 'style-loader', 'css-loader', 'sass-loader' ]
                }
       ]
 },
  plugins: [
    new HtmlWebPackPlugin({
           template: "./src/html/index.html",
           filename: "./index.html",
    })
  ]
}

One thing to notice is that we’re in javascript land! You can see that this config file is 100% normal javascript. Webpack is entirely built with js.

You can also see a whole section here in the middle titled “rules”. Not surprisingly, this is where we declare the rules that will govern our different assets. You might also have noticed that each rule targets a certain type of file with regex.

QUESTION:

Interview Question

Explain what role build tools play in modern frontend development.